<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef" @selection-change="selectChange">
      <!-- 表格操作按钮扩展 -->
      <template #tableButtons>
        <a-button @click="operate('optimize')" type="primary" status="success" v-auth="['/core/dataMaintain/optimize']">
          <template #icon><icon-tool /></template>优化表
        </a-button>

        <a-button @click="operate('clear')" type="primary" status="success" v-auth="['/core/dataMaintain/fragment']">
          <template #icon><icon-experiment /></template>清理碎片
        </a-button>
      </template>
      <!-- 操作 -->
      <template #operationCell="{ record }">
        <a-link @click="tableStruct(record.name)"> <icon-eye /> 查看 </a-link>
      </template>
    </ma-crud>

    <a-modal v-model:visible="visible" width="900px" :footer="false">
      <template #title>表结构数据</template>
      <ma-crud
        ref="tableRef"
        :options="tableCrud"
        :columns="[
          { title: '字段名称', dataIndex: 'column_name' },
          { title: '字段类型', dataIndex: 'column_type' },
          { title: '字段注释', dataIndex: 'column_comment' }
        ]"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import dataMaintain from "@/api/system/dataMaintain"
import { Message } from "@arco-design/web-vue"

const crudRef = ref()
const tableRef = ref()
const selecteds = ref([])
const currentTable = ref("")
const visible = ref(false)

const selectChange = (val) => (selecteds.value = val)

const operate = async (op) => {
  if (selecteds.value.length === 0) {
    Message.error("至少要选择一条数据")
    return
  }
  let response
  if (op === "optimize") {
    response = await dataMaintain.optimize(selecteds.value)
  }

  if (op === "clear") {
    response = await dataMaintain.fragment(selecteds.value)
  }

  response.code === 200 && Message.success(response.message)
}

const tableStruct = (name) => {
  tableCrud.requestParams.table = name
  visible.value = true
  tableRef.value.requestData()
}

const crud = reactive({
  api: dataMaintain.getPageList,
  searchColNumber: 2,
  pageLayout: "fixed",
  showIndex: false,
  rowSelection: { showCheckedAll: true, key: "name" },
  operationColumn: true,
  operationColumnWidth: 100
})

const columns = reactive([
  { title: "表名称", dataIndex: "name", search: true, width: 200 },
  { title: "表引擎", dataIndex: "engine", width: 150 },
  { title: "总行数", dataIndex: "rows", width: 150 },
  { title: "碎片大小", dataIndex: "data_free", width: 150 },
  { title: "数据大小", dataIndex: "data_length", width: 150 },
  { title: "索引大小", dataIndex: "index_length", width: 150 },
  { title: "字符集", dataIndex: "collation", width: 180 },
  { title: "创建时间", dataIndex: "create_time", width: 180 },
  { title: "表注释", dataIndex: "comment", width: 180 }
])

const tableCrud = reactive({
  api: dataMaintain.getDetailed,
  requestParams: {},
  autoRequest: false,
  showTools: false
})
</script>

<script>
export default { name: "system:dataMaintain" }
</script>

<style scoped></style>
